<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>010_二级菜单</title>
    <link href="css/sdmenu.css" rel="stylesheet">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a, img {
            border: 0;
            text-decoration: none;
        }
        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
    </style>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>

<div id="my_menu" class="sdmenu">
    <div>
        <span class="menuSpan">在线工具</span>
        <a href="#">图像优化</a>
        <a href="#">收藏夹图标生成器</a>
        <a href="#">邮件</a>
        <a href="#">htaccess密码</a>
        <a href="#">梯度图像</a>
        <a href="#">按钮生成器</a>
    </div>

    <div class="collapsed">
        <span class="menuSpan">支持我们</span>
        <a href="#">推荐我们</a>
        <a href="#">链接我们</a>
        <a href="#">网络资源</a>
    </div>

    <div class="collapsed">
        <span class="menuSpan">合作伙伴</span>
        <a href="#">JS工具包</a>
        <a href="#">CSS驱动</a>
        <a href="#">CodingForums</a>
        <a href="#">CSS例子</a>
    </div>

    <div class="collapsed">
        <span class="menuSpan">测试电流</span>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
    </div>

</div>

<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">

    /**
     *
     * 我们的每一个菜单都是一个div，当div具有collapsed这个类时，div就是折叠状态，当div没有这个类时，div就是展开状态
     *
     * 点击菜单，切换菜单的显示状态
     */

    var menuSpan = document.querySelectorAll(".menuSpan"); // 获取所有class为menuSpan的元素

    // 定义一个变量，来保存当前打开的菜单
    var openDiv = menuSpan[0].parentNode;

    for(var i = 0; i < menuSpan.length; i++) {
        menuSpan[i].onclick = function () {
            // this代表的是当前点击的span，获取span的父元素
            var parentDiv = this.parentNode;

            toggleMenu(parentDiv);

            // 判断openDiv和parentDiv是否相同
            if(openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
                // 打开菜单以后，应该关闭之前打开的菜单
                // addClass(openDiv, "collapsed");

                // 为了可以统一处理动画的过度效果，我们希望在这将addClass改为toggleClass,但是，此处的toggleClass不需要有移除的功能，所以添加hasClass 判断
                // toggleClass(openDiv, "collapsed");
                toggleMenu(openDiv);
            }
            // 修改openDiv为当前打开的菜单
            openDiv = parentDiv;
        }
    }

    /**
     * 定义一个函数用来切换菜单的折叠和显示状态
     * @param obj
     */
    function toggleMenu(obj) {

        // 在切换类之前获取元素的高度
        var begin = obj.offsetHeight;

        // 切换parentDiv
        toggleClass(obj, "collapsed");

        // 在切换类之后获取元素的高度
        var end = obj.offsetHeight;

        // 动画效果就是从begin到end过度
        obj.style.height = begin + "px";
        move(obj, 'height', end, 5, function () {
            // 动画执行完毕，内联样式就没有存在的意义了，删除之
            obj.style.height = "";
        });
    }
</script>
</body>
</html>